<seed-content>
  <seed-toolbar-header class="seed-underline">
    <seed-toolbar-title>客户列表</seed-toolbar-title>
    <seed-toolbar-menu></seed-toolbar-menu>
  </seed-toolbar-header>
  <seed-infinite-scroll (infiniteScroll)="getSalespersonStudentList()">
    <div class="customer-list-wrap">
      <div class="customer-search">
        <input type="search" [formControl]="searchInput" placeholder="请输入搜索内容">
      </div>
      <div class="customer-list">
        <div class="list-header seed-underline" #listHeader [class.open]="pageData.isOpen" (click)="showDropDown()">
          <p class="select-title">{{pageData.currentItem.title}}</p>
        </div>
        <div class="list-item" *ngFor="let item of salespersonStudentList">
          <seed-avatar [lazyLoadAvatar]=""></seed-avatar>
          <div class="item-col seed-underline" routerLink="/sale/detail/{{item.studentId}}/{{item.saleUserId}}">
            <span class="name">{{item.name}}</span>
            <span class="status"
                  *ngIf="item.studentStatus > 0">{{pageData.stateList[item.studentStatus].title}}</span>
            <span class="status" *ngIf="item.studentStatus === 0">初始状态</span>
          </div>
        </div>
      </div>
    </div>
    <seed-infinite-scroll-content *ngIf="salespersonStudentList.length >= 10"></seed-infinite-scroll-content>
  </seed-infinite-scroll>
  <seed-submit-button class="seed-scroll-outside" [disabled]="false" (submit)="jumpTo()"></seed-submit-button>
  <div class="seed-scroll-outside modal-backdrop" [class.active]="pageData.isOpen"
       (touchstart)="closeDropDown($event)"></div>
  <ul class="seed-scroll-outside drop-down" #dropDown [class.active]="pageData.isOpen"
      (touchstart)="closeDropDown($event)">
    <li (touchstart)="onSelect(item);" *ngFor="let item of pageData.stateList">
      <div class="seed-underline" [class.selected]="pageData.currentItem.id === item.id">{{item.title}}</div>
    </li>
  </ul>
</seed-content>
